<template>
  <div class="goods_container">
    <div class="goods-nav">
      <FilterNav v-if="!isNavShow()" />
      <GoodNav v-else />
    </div>
    <div>
      <div class="goods" v-if="goodsStore.goodsList.length !== 0">
        <template v-for="item in goodsStore.goodsList" :key="item.id">
          <Good :data="item" />
        </template>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
      </div>
      <div class="no_good" v-else>
        <NoGoods />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, watch } from 'vue';
import GoodNav from './GoodNav.vue';
import FilterNav from './FilterNav.vue';
import Good from './Good.vue';
import { useRoute } from 'vue-router';
import { useGoodsStore } from '../../../stores/module/goods/goods.ts';
import NoGoods from './NoGoods.vue';
import { useScroll } from '@/hooks/useScroll.ts';

const goodsStore = useGoodsStore();
const { isReachBottom } = useScroll()


// 通过路由判断是否有搜索参数
const route = useRoute();
function isNavShow() {
  return Object.keys(route.query).length === 0;
}
// 页面加载时，根据路由参数初始化数据
onMounted(async () => {
  await goodsStore.initGoodsList()
})
// 监听路由变化，重新加载数据
watch(() => route.query.description, (newDescription) => {
  goodsStore.initGoodsList({ description: newDescription });
});
watch(isReachBottom, async (val) => {
  if (val) {
    await goodsStore.loadMoreGoods({ ...goodsStore.searchParams })
  }
})
</script>

<style lang="less" scoped>
.goods_container {
  box-sizing: border-box;
  margin: 20px;
  width: 1396px;
  background-color: white;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  padding: 12px;
  min-height: 680px;

  .goods {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around
  }

  i {
    width: 252px;
  }
}

@media (max-width: 1412px) {
  .goods_container {
    width: 1048px;
  }
}
</style>
